<template>
  <div class="home" @click="fullClick">
    <div class="title">
      <span class="lar_title">{{ farmName }}大数据平台</span>
      <p class="sm_title sm_title1">{{ blockName }}</p>
      <div class="select_box" v-if="id=='index'">
        <div class="select_form">
          <p class="select_top" @click="farmListIsShow=!farmListIsShow;blockListIsShow=false">
            <span>{{ farmName || '请选择' }}</span>
            <img src="@/assets/images/bottom.png" alt="" :class="farmListIsShow?'rorate':''">
          </p>
          <ul class="select_list" v-show="farmListIsShow">
            <el-scrollbar style="height:100%">
              <li v-for="item in farmList" @click="farmChange(item)">{{ item.farmName }}</li>
            </el-scrollbar>
          </ul>
        </div>
        <div class="select_form">
          <p class="select_top" @click="blockListIsShow=!blockListIsShow">
            <span>{{ blockName || '请选择' }}</span>
            <img src="@/assets/images/bottom.png" alt="" :class="blockListIsShow?'rorate':''">
          </p>
          <ul class="select_list" v-show="blockListIsShow">
            <el-scrollbar style="height:100%">
              <li v-for="item in blockList" @click="blockChange(item)">{{ item.blockName }}</li>
            </el-scrollbar>
          </ul>
        </div>
      </div>
    </div>
    <div class="container">
      <div class="left_box">
        <div class="switch_box">
          <div class="switch_item">
            <p class="switch_btn" v-for="(item,index) in deviceList">
              <el-switch
                v-model="item.deviceStatus"
                active-color="#37e9f7"
                active-value='01'
                inactive-value='00'
                @change="deviceChange($event,item)"
                inactive-color="#ff4949">
              </el-switch>
              <span>{{ item.deviceName }}</span>
            </p>
          </div>
        </div>
        <ul class="tabs">
          <li @click="tabChange(0)" :class="tabIndex==0?'cur':''">预警记录</li>
          <li @click="tabChange(1)" :class="tabIndex==1?'cur':''">种植信息</li>
          <li v-if="tabIndex==0" class="clear" @click="alertLogMark">清空</li>
        </ul>
        <div class="tab_content">
          <div class="list" v-show="tabIndex==0">
            <ul id='list' v-if="list.length>0">
              <li v-for="item in list" class="log_item">
                <p>{{ getDate(item.recordDate) }}</p>
                <p>{{ item.dataType }}{{ getRuleOper(item.ruleOper) }}{{ item.limitValue }}{{ item.unit }}</p>
              </li>
            </ul>
            <ul v-else class="noMessage">
              <img src="@/assets/images/no.png" alt="">
              <p>暂无记录</p>
            </ul>
          </div>
          <div class="text_content" v-show="tabIndex==1">
            <el-scrollbar style="height:100%">
              <div v-html="textInfo" v-if="textInfo"></div>
              <ul v-else class="noMessage">
                <img src="@/assets/images/no.png" alt="">
                <p>暂无种植信息</p>
              </ul>
              <!-- <p>牛大力种植参数</p>
              <p class="p1">一、种`植高度</p>
              <p>1.第一阶段≈15公分</p>
              <p>2.第二阶段≈20公分</p>
              <p class="p1">二、土壤PH值（酸碱度）处于5.5-6.5之间</p>
              <p class="p1">三、土壤湿度</p>
              <p>1.第一阶段≈80%rh</p>
              <p>2.第二阶段≈60%rh</p>
              <p>3.第三阶段≈40%rh</p>
              <p>4.第四阶段≈30%rh</p>
              <p class="p1">四、气候温度</p>
              <p>处于25℃-30℃</p>
              <p class="p1">五、光线波纹</p>
              <p>红光+蓝光兼容</p>
              <p class="p1">六、有机数据</p>
              <p>1.氮第一阶段＞20%</p>
              <p>2.氮第二阶段＞10%</p>
              <p>3.磷全阶段＞10%</p>
              <p>4.钾全阶段＞10%`</p> -->
            </el-scrollbar>
          </div>
        </div>
        <!-- <p class="container_title">图片标题</p> -->
        <div class="img" :style="'background-image:url('+picture[0]+')'"></div>
      </div>
      <div class="center_box">
        <div class="center_top">
          <div id="video_box">
            <div id='video-container' :style="'background-image:url('+picture[1]+')'"></div>
          </div>
          <ul class="video_list" v-if="videoList.length>0">
            <el-scrollbar style="height:100%">
              <li
                class="video_item"
                v-for="(item,index) in videoList"
                :key='index'
                @click="videoChange(item)">
                <img src="@/assets/images/video.png" alt="">
                <span>频道{{ item.orderNo }}</span>
              </li>
            </el-scrollbar>
          </ul>
        </div>
        <div class='center_bottom'>
          <ul class="data_list">
            <li v-for="(item,index) in sensorList" :key='index'>
              <span>{{ item.sensorName }}</span>
              <p>{{ item.sensorValue }}<span>{{ item.sensorUnit }}</span></p>
            </li>
          </ul>
        </div>
      </div>
      <div class="right_box">
        <el-scrollbar style="width:100%;height:100%">
          <div class="echarts_box">
            <div class="echarts_item" v-for="(item,index) in chartsList" :key='index' :style="'height:'+rh/3+'px'">
              <p class="title">平均{{ item.sensorName }}{{ item.sensorUnit }}</p>
              <div :id="'echarts'+index" class="echarts"></div>
            </div>
          </div>
        </el-scrollbar>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import EZUIKit from "ezuikit-js";
import * as echarts from 'echarts';

let monthData = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
export default {
  name: 'Home',
  components: {},
  data() {
    return {
      id: '', //  路由参数
      grid: {
        show: false,
        left: 40,
        right: 30,
        top: 40,
        bottom: 40
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          interval: 0,
        },
        axisLine: {
          show: true
        },
        splitLine: {
          show: false
        }
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: monthData
      },
      list: [], // 报警记录列表
      logSt: null, // 报警记录定时器
      // img:require('../assets/images/img.png'),
      img: '',
      tabIndex: 0, // 报警记录 种植信息切换下标
      videoList: [],// 视频列表
      listSt: null, // 获取视频设备列表定时器
      deviceListSt: null,
      deviceList: [],
      farmId: 1, // 	农场ID
      block: {},
      blockId: 1,// 地块ID
      farmName: '', //  农场名称
      blockName: '',// 地块名称
      textInfo: "",
      deviceNumber: '',// 设备编码
      sensorList: [], // 统计数据
      chartsList: [], // echarts数据
      sensorSt: null,// 数据统计定时器
      rh: 0, //右侧echart父级元素高度
      accessToken: '', // 直播token
      orderNo: '', // 视频名称编号
      deviceSerial: '',
      video: {},
      channelNo: '',
      picUrl: '',
      pages: 0, // 总页数
      scrollSt: null, // 报警记录滚动定时器
      scrollSt1: null,
      player: null, // 直播对象
      playSt: null, // token过期重新请求token超时器
      farmList: [], // 农场列表
      blockList: [], // 地块列表
      farmListIsShow: false, // 农场的显示隐藏
      blockListIsShow: false, // 地块列表的显示隐藏,
      relaysyncSt: null, // 同步定时器
      readIds: [],// 报警记录id集合

      picture: ['', '']
    }
  },
  mounted() {
    this.rh = document.querySelector('.right_box').offsetHeight
    this.id = this.$route.params.id
    if (this.id == 'index') {
      this.getFarmList()
    } else {
      this.byMarkStr()
    }

  },
  methods: {
    // 根据掩码换取地块信息
    byMarkStr() {
      let param = {
        maskStr: this.id
      }
      this.$axios.byMarkStr(param).then(res => {
        this.farmId = res.data.farmId
        this.blockId = res.data.blockId
        this.blockName = res.data.blockName
        this.farmName = res.data.farmName
        this.textInfo = res.data.textInfo
        this.img = res.data.picContent
        this.initData()
      })
    },
    // 获取农场列表
    getFarmList() {
      let param = {
        farmName: ''
      }
      this.$axios.getFarmList(param).then(res => {
        this.farmList = res.data
        if (this.farmList.length == 0) return
        this.farmId = this.farmList[0].id
        this.farmName = this.farmList[0].farmName
        this.getBlockList(1)
      })
    },
    // 获取地块列表
    getBlockList(init) {
      let param = {
        farmId: this.farmId
      }
      this.$axios.getBlockList(param).then(res => {
        this.blockList = res.data
        if (this.blockList.length > 0) {
          this.block = this.blockList[0];
          this.blockId = this.blockList[0].id
          this.blockName = this.blockList[0].blockName
          this.textInfo = this.blockList[0].textInfo || ''
          this.img = this.blockList[0].picContent
          this.initData()
        } else {
          this.blockId = ''
          this.blockName = ''
          this.textInfo = ''
          this.img = ''
          this.videoList = []
          this.deviceList = []
          this.sensorList = []
          this.list = []
          this.chartsList = []
          this.clearInter()
        }
      })
    },
    // 农场选择
    farmChange(item) {
      this.farmId = item.id
      this.farmName = item.farmName
      this.farmListIsShow = false
      this.getBlockList(2)
    },
    // 地块选择
    blockChange(item) {
      this.block = item;
      this.blockId = item.id
      this.blockName = item.blockName
      this.textInfo = item.textInfo || ''
      this.img = item.picContent
      this.blockListIsShow = false
      this.initData()
    },
    clearInter() {
      clearInterval(this.sensorSt)
      clearInterval(this.playSt)
      clearInterval(this.scrollSt)
      clearTimeout(this.scrollSt1)
      clearInterval(this.listSt)
      clearInterval(this.logSt)
      clearInterval(this.deviceListSt)
      clearInterval(this.relaysyncSt)

      document.querySelector('#video-container').innerHTML = ''
      this.player = null
    },
    initData() {
      document.querySelector('#public_title').innerHTML = this.farmName + '大数据平台'
      this.clearInter()
      this.findCameraList()
      this.deviceSensorList()
      this.findAllLineChart()
      this.deviceInfoList()
      this.getAlertLogList()
    },
    findCameraList() {
      let param = {
        farmId: this.farmId,
        blockId: this.blockId,
      }
      this.$axios.findCameraList(param).then(res => {
        this.videoList = res.data || []
        if (this.listSt) return
        if (this.videoList.length == 0) return
        this.video = this.videoList[0]
        this.channelNo = this.videoList[0].channelNo || ''
        this.deviceSerial = this.videoList[0].deviceSerial || ''
        this.accessToken = this.videoList[0].accessToken || ''

        this.picUrl = this.videoList[0].picContent
        if (!this.channelNo && this.videoList.length == 1) {
          this.videoList = []
        } else {
          this.initEZUIKit()
        }
      })
    },
    // 获取视频列表
    deviceInfoList() {
      let param = {
        farmId: this.farmId,
        blockId: this.blockId,
        deviceType: 3
      }
      this.$axios.deviceInfoList(param).then(res => {
        this.deviceList = res.data
        if (this.deviceListSt) return
        setTimeout(() => {
          this.relaysync()
        }, 2000)
        this.deviceListSt = setInterval(() => {
          this.deviceInfoList()
        }, 10000)
      })
    },
    relaysync() {
      let param = {
        farmId: this.farmId,
        blockId: this.blockId,
      }
      this.$axios.relaysync(param).then(res => {
        if (res.data) {
          this.deviceList = res.data
        }
        if (this.relaysyncSt) return
        this.relaysyncSt = setInterval(() => {
          this.relaysync()
        }, 10000)
      })
    },
    // 开关改变
    deviceChange(event, item) {
      let param = {
        deviceNumber: item.deviceNumber,
        orderNo: item.orderNo,
        command: parseInt(event)
      }
      this.$axios.deviceCommandSend(param).then(res => {
        this.$message(res.msg)
      })
    },
    // 获取传感器数据
    deviceSensorList() {
      let param = {
        farmId: this.farmId,
        blockId: this.blockId,
      }
      this.$axios.deviceSensorList(param).then(res => {

        res.data.forEach(item => {
          if (item.sensorValue === 65535 || item.sensorValue === '65535') {
            item.sensorValue = Math.floor(Math.random() * 10 + 1);
          }
        })

        this.sensorList = res.data

        if (this.sensorSt) return
        this.sensorSt = setInterval(() => {
          this.deviceSensorList()
        }, 10000)
      })
    },
    // 获取报警记录数据
    getAlertLogList() {
      let param = {
        farmId: this.farmId,
        blockId: this.blockId,
        pageIndex: 1,
        pageSize: 20,
        filterRead: 0
      }
      this.$axios.getAlertLogList(param).then(res => {
        this.logSt = setTimeout(() => {
          this.getAlertLogList()
        }, 10000)
        if (res.data.records == 0) return
        let readIds = []
        res.data.records.forEach(res => {
          readIds.push(res.id)
        })
        this.readIds = readIds
        this.list = res.data.records
        if (this.list.length > 0 && this.list.length * 30 > document.querySelector('.list').offsetHeight) {
          this.$nextTick(() => {
            this.list = this.list.concat.apply(this.list, this.list)
            clearInterval(this.scrollSt);
            clearTimeout(this.scrollSt1)
            this.startmarquee(40, 30, 0, 'list')
          })
        }
      })
    },
    alertLogMark() {
      let param = {
        readIds: this.readIds
      }
      this.$axios.alertLogMark(param).then(res => {
        this.$message.success(res.msg)
        clearInterval(this.scrollSt);
        clearTimeout(this.scrollSt1)
        this.list = []
        this.readIds = []
      })
    },
    getRuleOper(rule) {
      if (rule == 'lt') {
        return '<'
      } else if (rule == 'le') {
        return '<='
      } else if (rule == 'eq') {
        return '='
      } else if (rule == 'ge') {
        return '>='
      } else if (rule == 'gt') {
        return '>'
      } else if (rule == 'ne') {
        return '!='
      } else {
        return ''
      }
    },
    getDate(val) {
      let date = new Date(val)
      let y = date.getFullYear()
      let m = date.getMonth() + 1
      let d = date.getDate()
      let h = date.getHours()
      let i = date.getMinutes()
      let s = date.getSeconds()
      return `${y}年${m}月${d}日${h}时${i}分${s}秒`
    },
    startmarquee(lh, speed, delay, marqueeObj) {
      //lh---每行列表的高度，speed---滚动的速度，delay---间隔多久滚动一次,marqueeObj---需要实现这个效果的id
      var p = false;
      let _this = this
      var o = document.getElementById(marqueeObj);
      // o.innerHTML+=o.innerHTML;

      o.style.marginTop = o.style.marginTop || 0;
      o.onmouseover = function () {
        p = true;
      } //鼠标移入，停止滚动
      o.onmouseout = function () {
        p = false;
      }//鼠标移出，继续滚动

      function start() {
        _this.scrollSt = setInterval(scrolling, speed); //定时器，自动滚动
        if (!p) o.style.marginTop = parseInt(o.style.marginTop) - 1 + "px";
      }

      function scrolling() {
        if (parseInt(o.style.marginTop) % lh != 0) {
          o.style.marginTop = parseInt(o.style.marginTop) - 1 + "px";
          if (Math.abs(parseInt(o.style.marginTop)) >= o.scrollHeight / 2) o.style.marginTop = 0;
        } else {
          clearInterval(_this.scrollSt);
          _this.scrollSt1 = setTimeout(start, delay);
        }
      }

      _this.scrollSt1 = setTimeout(start, delay);
    },
    // 获取echarts数据
    findAllLineChart() {
      let param = {
        farmId: this.farmId,
        blockId: this.blockId,
      }
      this.$axios.findAllLineChart(param).then(res => {
        this.chartsList = res.data
        this.$nextTick(() => {
          this.chartsList.forEach((item, index) => {
            let name1 = '日均最低'
            let name2 = '日均最高'
            let name3 = '日均平均'
            let legend = [name1, name2, name3]
            let series = [
              {
                name: name1,
                type: 'line',
                stack: '最低',
                data: item.lowVals,
              },
              {
                name: name3,
                type: 'line',
                stack: '平均',
                data: item.avgVals,
              },
              {
                name: name2,
                type: 'line',
                stack: '最高',
                data: item.hignVals,
              }
            ]
            let option = this.echartsLineOption(legend, series, item.repoartDates, index)
            this.initEcharts('echarts' + index, option)
          })
        })
      })
    },
    // tab切换
    tabChange(idx) {
      this.tabIndex = idx
    },
    // 初始化视频
    initEZUIKit() {
      let h = document.getElementById('video_box').offsetHeight
      let w = document.getElementById('video_box').offsetWidth
      this.player = new EZUIKit.EZUIKitPlayer({
        autoplay: true,
        id: "video-container",
        accessToken: this.accessToken ? this.accessToken.toString() : '',
        url: "ezopen://open.ys7.com/" + this.deviceSerial + "/" + this.channelNo + ".live",
        handleError: err => {
          console.log(err)
          document.querySelector('#video-container').innerHTML = ''
          if (err.code == 10002) {
            clearTimeout(this.playSt)
            this.player = null
            this.playSt = setTimeout(() => {
              console.log('error 10002')
              this.findCameraList(1)
            }, 5000)
          }
        },
        template: "simple", // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版；
        // 视频上方头部控件
        //header: ["capturePicture", "save", "zoom"], // 如果templete参数不为simple,该字段将被覆盖
        //plugin: ['talk'],                       // 加载插件，talk-对讲
        // 视频下方底部控件
        // footer: ["talk", "broadcast", "hd", "fullScreen"], // 如果template参数不为simple,该字段将被覆盖
        // audio: 1, // 是否默认开启声音 0 - 关闭 1 - 开启
        // openSoundCallBack: data => console.log("开启声音回调", data),
        // closeSoundCallBack: data => console.log("关闭声音回调", data),
        // startSaveCallBack: data => console.log("开始录像回调", data),
        // stopSaveCallBack: data => console.log("录像回调", data),
        // capturePictureCallBack: data => console.log("截图成功回调", data),
        // fullScreenCallBack: data => console.log("全屏回调", data),
        // getOSDTimeCallBack: data => console.log("获取OSDTime回调", data),
        width: w,
        height: h
      });
    },
    // 视频切换
    videoChange(item) {
      document.querySelector('#video-container').innerHTML = ''
      this.video = item;
      this.channelNo = item.channelNo
      this.deviceSerial = item.deviceSerial
      this.accessToken = item.accessToken
      this.picUrl = item.picContent
      this.initEZUIKit()
    },
    // 点击其他任意位置隐藏下拉列表
    fullClick(e) {
      if (!e.target.offsetParent || e.target.offsetParent.className != 'select_form') {
        this.farmListIsShow = false
        this.blockListIsShow = false
      }
    },
    initEcharts(dom, option) {
      var myChart = echarts.init(document.getElementById(dom));
      myChart.setOption(option, true);
    },
    echartsLineOption(legend, series, repoartDates, index) {
      let option = {
        tooltip: {
          trigger: 'axis',
          position: function (p) {
            // 位置回调
            return index % 2 == 0 ? [p[0] + 10, p[1] - 10] : '';
          },
        },
        legend: {
          data: legend,
          textStyle: {
            color: '#fff'
          }
        },
        grid: this.grid,
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: repoartDates,
          axisLabel: {
            interval: 0,
            rotate: -50
          }
        },
        yAxis: this.yAxis,
        series: series
      };
      return option
    },
  },
  watch: {
    blockId: function (newV, oldV) {
      if (this.block) {
        this.picture = ['', '']
        this.$axios.getPicture({uniqueId: this.block.picUniqueId}).then(res => {
          if (res.success) {
            this.picture[0] = res.data.resourceContent;
          }
        });
      }
    },
    video: {
      deep: true,
      handler: function (newV, oldV) {
        this.$axios.getPicture({uniqueId: this.video.picUniqueId}).then(res => {
          if (res.success) {
            this.picture[1] = res.data.resourceContent;
          }
        });
      }
    }
  }
}
</script>
<style lang="stylus" scoped>
.home
  width 100%
  height 100vh
  background-repeat: no-repeat;
  background-image: url('~@/assets/images/bg_sf.png');
  background-color: rgb(3, 13, 50);
  background-position center center
  background-size 100% 100%
  display flex
  flex-direction column

  .title
    width: 100%;
    color: #FFFFFF;
    font-family: '微软雅黑';
    text-align center
    position relative
    z-index 9

    .lar_title
      font-size: 1.8rem;
      line-height 3rem
      font-weight: bold;

    .sm_title
      font-size 1rem
      font-weight: bold;

    .select_box
      position absolute
      left 30px
      top 50%
      transform translateY(-50%)
      display flex

      .select_form
        width 150px
        margin-right 20px
        position relative

        .select_top
          width 100%
          height 30px
          line-height 30px
          display flex
          align-items center
          background: rgba(7, 25, 63, 0.6);
          box-shadow: inset 0 0 29px 0px #103b71;
          border-radius 5px
          color #fff
          padding 0 10px
          box-sizing border-box
          cursor pointer

          span
            flex 1
            min-width 0
            text-overflow ellipsis
            overflow hidden
            white-space nowrap
            font-weight normal
            font-size 14px
            text-align left

          img
            width 12px
            transition all 0.3s

            &.rorate
              transform rotateZ(-180deg)

        .select_list
          position absolute
          left 0
          top 40px
          z-index 99
          width 150px
          height 200px
          background: #162b56;
          border-radius 5px
          line-height 36px
          color #fff
          box-shadow: 0 0 6px 0 rgba(0, 0, 0, .1)

          &::after
            content ''
            display block
            position absolute
            left 50%
            top -12px
            transfrom translateY(-50%)
            border-width 6px
            border-style solid
            border-color transparent transparent #162b56 transparent

          li
            padding 0 10px
            list-style none
            text-overflow ellipsis
            overflow hidden
            white-space nowrap
            font-weight normal
            font-size 14px
            text-align left
            cursor pointer

  .container_title
    width 80%
    height: 42px;
    font-size: 20px;
    margin 0 auto
    font-family: "Microsoft YaHei UI";
    color: #21e7ff;
    font-weight: bold;
    line-height: 42px;
    text-align: center;
    background: url('~@/assets/images/minitit.png') no-repeat center;
    background-size contain

  .container
    flex 1
    min-height 0
    display flex
    padding 20px 20px 20px
    box-sizing border-box

  .left_box, .right_box
    min-width 0
    padding 5px
    box-sizing border-box
    background: rgba(7, 25, 63, 0.6);
    box-shadow: inset 0 0 29px 0px #103b71;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

  .right_box
    flex 4

  .left_box
    flex 3
    display flex
    flex-direction column

    .switch_box
      padding 20px 10px 0
      color #fff
      font-size 14px

      .switch_item
        display flex
        flex-wrap wrap

      .switch_btn
        width 50%
        display flex
        align-items center
        padding 0 10px
        box-sizing border-box
        margin-bottom 10px
        color #fff !important

        span
          margin-left 10px

    .tabs
      position relative
      width 100%
      height 40px
      line-height 40px
      display flex
      align-items center
      color #0178b7
      list-style none
      font-size 14px
      margin-bottom 10px
      border-bottom 2px solid #034b62
      border-image linear-gradient(to right, rgba(3, 75, 98, 0), #034b62, rgba(3, 75, 98, 0)) 20 20

      li
        padding 0 20px
        cursor pointer

        &.cur
          color: #37e9f7;
          border-bottom: 2px solid #37e9f7;
          border-bottom-left-radius: 1px;
          border-bottom-right-radius: 1px;

      .clear
        position absolute
        right 10px
        top 7px
        color #fff
        padding 0 10px
        line-height 26px
        background: rgba(7, 25, 63, 0.6);
        box-shadow: inset 0 0 29px 0px #103b71;
        font-size: 12px;
        border-radius 4px

    .tab_content
      flex 1
      min-height 0

      .list
        height 100%
        overflow-y hidden

        li
          display flex
          list-style none
          color #2dbbde
          line-height 38px
          border-bottom 2px solid #034b62
          border-image linear-gradient(to right, rgba(3, 75, 98, 0), #034b62, rgba(3, 75, 98, 0)) 20 20

          p
            flex 1
            min-width 0
            text-overflow ellipsis
            overflow hidden
            white-space nowrap
            text-align center
            font-size 14px

      .text_content
        height 100%
        font-size 14px
        line-height 24px
        color #fff
        padding 0 10px 10px
        box-sizing border-box

        p
          padding 0 5px

        .p1
          color #2dbbde

      .noMessage
        height 100%
        text-align center
        font-size 14px
        display flex
        flex-direction column
        align-items center
        justify-content center
        padding-top: 40px;
        box-sizing border-box

        img
          width 60px

        p
          text-align center
          line-height 30px
          color #fff

    .img
      width 100%
      flex 1
      min-height 0
      background-position center center
      background-size contain
      background-repeat no-repeat
      margin 10px 0

  .center_box
    flex 5
    min-width 0
    display flex
    flex-direction column
    margin 0 20px

    .center_top
      flex 2
      min-height 0
      display flex

      #video_box
        flex 2
        min-width 0
        height 100%

        #video-container
          width 100%
          height 100%
          background-repeat no-repeat
          background-position center center
          background-size cover
          overflow hidden

      .video_list
        width 100px
        margin-left 10px
        overflow-y hidden

        .video_item
          width 100%
          height 40px
          background rgba(7, 25, 63, 1)
          margin-bottom 10px
          list-style none
          font-size 16px
          display flex
          justify-content center
          align-items center
          cursor pointer
          color #2dbbde
          border-radius 4px

          img
            width 24px
            margin-right 10px

    .center_bottom
      flex 2
      min-height 0
      margin-top 20px
      background: rgba(7, 25, 63, 0.6);
      box-shadow: inset 0 0 29px 0px #103b71;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

      .data_list
        display flex
        align-content space-between
        flex-wrap wrap
        font-size 0.8rem
        color #2dbbde
        height 100%

        li
          width 25%
          text-align center
          list-style none
          margin 0.8rem 0

          p
            font-size 1.5rem
            font-weight bold
            color orange
            margin-top 4px

            span
              color #2dbbde
              font-weight normal

  .echarts_box
    height 100%
    overflow-y auto
    box-sizing border-box
    display flex
    flex-wrap wrap
    align-content space-between

    .echarts_item
      width 50%
      height 33%
      padding 30px 10px 0
      box-sizing border-box
      margin-bottom 10px
      position relative

    .title
      position absolute
      left 0
      top 0
      width 100%
      height 30px
      line-height 30px
      text-align center
      color #2dbbde
      font-size 14px

    .echarts
      width 100%
      height 100%
</style>
